<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="shop-info-box">
					<view class="info-item flexWrap">
						<view class="flexWrapNo" style="flex: 1;">
							<view class="item-title">可用台桌：</view>
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{array[index]}}</view>
							</picker>
						</view>
						<text class="icon-more"></text>
					</view>
					<view class="function-box" v-if="index!=0">
						<view class="function-item flexWrap">
							<view class="th1">时间</view>
							<view class="th2">开始时间</view>
							<view class="th3">结束时间</view>
						</view>
						<view class="function-item flexWrap" v-for="(item,index) in weekList" :key="index">
							<view class="th1 flexWrapNo" @tap="selectWeek(index)">
								<image src="../../static/order/select-icon.png" class="select-icon" v-if="item.week==1"></image>
								<image src="../../static/order/notselect-icon.png" class="select-icon" v-else></image>
								{{item.name}}
							</view>
							<view class="th2">
								<picker mode="time" :value="item.starttime" start="00:00" end="24:00" :data-index='0'
									:data-arrIndex="index" @change="bindTimeChange">
									<view class="select-input" v-if="item.starttime">{{item.starttime}}</view>
									<view class="select-input" v-else>请选择时间</view>
								</picker>
							</view>
							<view  class="th3">
								<picker mode="time" :value="item.endtime" start="00:00" end="24:00" :data-index='1'
									:data-arrIndex="index" @change="bindTimeChange" :start="item.starttime">
									<view class="select-input" v-if="item.endtime">{{item.endtime}}</view>
									<view class="select-input" v-else>请选择时间</view>
								</picker>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom-box flexWrapNo">
					<view class="define-btn" @tap="save()">提交保存</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc: 0,
				array: ['不限制', '仅设置内时间可用','仅设置内时间不可用'],
				index: 0,
				limitIndex:0,
				weekList:[],
				starTime:"",
				endTime:"",
				type:0,
				mealIndex:0,
				roomIndex:0,
				packgeIndex:0,
				priceIndex:0
			}
		},
		onLoad(ops) {
			this.type=ops.type
			if(ops&&ops.index){
				this.mealIndex=ops.index
			}
			if(ops&&ops.roomIndex){
				this.roomIndex=ops.roomIndex
				this.packgeIndex=ops.packgeIndex
			}
			if(ops&&ops.priceIndex){
				this.priceIndex=ops.priceIndex
				this.packgeIndex=ops.packgeIndex
			}
			this.index=Number(uni.getStorageSync('usage_restrictions')-1)
			let week=uni.getStorageSync('set_time')
			console.log(week)
			for (let i in week) {
				if(!week[i].week){
					week[i].week=0
				}
			}
			this.weekList=week
			console.log(this.weekList)
		},
		onReady() {
			setTimeout(() => {
				this.pageOpc = 1
			}, 100)
		},
		methods: {
			bindPickerChange: function(e) {
				this.index = e.detail.value
			},
			limitChange(e){
				this.limitIndex = e.detail.value
			},
			selectWeek(index){
				if(this.weekList[index].week==0){
					this.weekList[index].week=1
				}else{
					this.weekList[index].week=0
				}
			},
			// 选择时间
			bindTimeChange(e) {
				let index = e.target.dataset.index
				let arrIndex = e.target.dataset.arrindex
				if (index == 0) {
					this.weekList[arrIndex].starttime = e.target.value
				} else {
					this.weekList[arrIndex].endtime = e.target.value
				}
			},
			save(){
				this.$tools.showToast('修改成功')
				let pages = getCurrentPages(); //当前页
				let beforePage = pages[pages.length - 2]; //上个页面
				if(this.type==1){
					beforePage.$vm.mealArr[this.mealIndex].set_time=this.weekList
					beforePage.$vm.mealArr[this.mealIndex].usage_restrictions=Number(this.index)+1
				}else if(this.type==2){
					beforePage.$vm.mjList[this.roomIndex].mealArr[this.packgeIndex].usage_restrictions=Number(this.index)+1
					beforePage.$vm.mjList[this.roomIndex].mealArr[this.packgeIndex].set_time=this.weekList
				}else{
					beforePage.$vm.priceList[this.priceIndex].mealArr[this.packgeIndex].usage_restrictions=Number(this.index)+1
					beforePage.$vm.priceList[this.priceIndex].mealArr[this.packgeIndex].set_time=this.weekList
				}
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},2000)
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0 30upx;
		padding-bottom: 200upx;
		.shop-info-box {
			.info-item {
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40upx;
				color: #FFFFFF;
				padding: 30upx 0;
				border-bottom: 1upx solid #36355E;
				align-items: flex-start;
				&:nth-last-of-type(1){
					border-bottom: none;
				}
				.item-title{
					min-width: 140upx;
					flex: none;
				}
				.small {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin: 0 40upx;
				}
				picker{
					flex: 1;
				}
				.select-input{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFE577;
					flex: 1;
				}
				input {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFE577;
					flex: 1;
				}
				textarea{
					background: #1D1C5C;
					border-radius: 16upx;
					padding: 30upx;
					height: 140upx;
				}
				.icon-more {
					border-color: #FFFFFF;
				}

				.placeholderclass {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFE577;
				}
				.select-box{
					flex-wrap: wrap;
					.select-item{
						font-size: 28upx;
						color: #FFFFFF;
						margin-bottom: 20upx;
						width: 50%;
						.select-icon{
							width: 48upx;
							height: 48upx;
							margin-right: 10upx;
						}
					}
				}
			}
			.remaks-box{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #82819B;
				line-height: 40rpx;
				padding-left: 138upx;
				margin-top: 12upx;
			}
		}
		.function-box{
			background: #1D1C5C;
			border-radius: 10upx;
			padding: 30upx;
			margin-top: 20upx;
			.function-item{
				font-size: 24upx;
				color: #FFFFFF;
				height: 100upx;
				line-height: 100upx;
				border-bottom: 1rpx solid #36355E;
				border-left: 1rpx solid #36355E;
				border-right: 1rpx solid #36355E;
				&:nth-of-type(1){
					border-top: 1rpx solid #36355E;
					font-weight: bold;
					font-size: 30upx;
					.th3{
						color: #FFFFFF;
					}
				}
				.th1{
					width: 33%;
					height: 100upx;
					padding: 0 10upx;
					text-align: center;
					border-right: 1rpx solid #36355E;
					justify-content: center;
					.select-icon{
						width: 48upx;
						height: 48upx;
						margin-right: 10upx;
					}
				}
				.th2{
					height: 100upx;
					width: 33%;
					padding: 0 10upx;
					border-right: 1rpx solid #36355E;
					text-align: center;
					flex: 1;
					overflow-y: scroll;
				}
				.th3{
					height: 100upx;
					width: 33%;
					padding: 0 10upx;
					text-align: center;
				}
			}
		}
		.bottom-box{
			height: 120rpx;
			background: #1D1C5C;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			.define-btn{
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80rpx;
				width: 322rpx;
				height: 80rpx;
				background: #26BCFD;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				text-align: center;
			}
		}
	}
</style>
